<template>
  <div class="_box">
    <div class="logo">
      <img style="width: 3vh;height: 3vh" src="@/static/logo.png" alt="PNG Icon">
      <div >论文云审核</div>
    </div>
    <div class="mine">
      <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" @click="drawer = true"/>
      <el-drawer v-model="drawer" :direction="rtl">
        <template #header>
          <h4>个人中心</h4>
        </template>
        <template #default>
          <div>
            你好
          </div>
        </template>
        <template #footer>
          <div style="flex: auto">
            <el-button @click="cancelClick">cancel</el-button>
            <el-button type="primary" @click="confirmClick">confirm</el-button>
          </div>
        </template>
      </el-drawer>
    </div>
  </div>
  <div>

  </div>
</template>

<script>
export default {
  name: "HeadView",
  data() {
    return {
      drawer: false
    }
  }
}
</script>

<style lang="scss" scoped>
._box {
  height: 7vh;
  width: 98vw;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.2), /* 上边框阴影 */
  0 -4px 4px -2px rgba(0, 0, 0, 0.2), /* 下边框阴影 */
  4px 0 4px -2px rgba(0, 0, 0, 0.2), /* 左边框阴影 */
  -4px 0 4px -2px rgba(0, 0, 0, 0.2); /* 右边框阴影 */
  margin: 1vh 1vw 1vh 1vw;
  padding: 0 1vw 0 1vw;
  border-radius: 10px;
}

//获取焦点阴影变深
._box:hover {
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.4), /* 上边框阴影 */
  0 -4px 4px -2px rgba(0, 0, 0, 0.4), /* 下边框阴影 */
  4px 0 4px -2px rgba(0, 0, 0, 0.4), /* 左边框阴影 */
  -4px 0 4px -2px rgba(0, 0, 0, 0.4); /* 右边框阴影 */
}

.logo {
  display: flex;
  width: 20%;
  font-weight: bolder;
}

.mine {
  display: flex;
  width: 80%;
  flex-direction: row-reverse;
}
</style>